未來 30 天，我會帶大家從最最基礎 HTML、CSS、TypeScript，一路到 Angular、React、Vue 三大框架，最後完成一個 能放在履歷上的自我介紹網站。整個系列會以實作為主，因為我自己一開始學習也是喜歡慢慢一步一步看知識才實作，但發現這樣太慢了！！！！
我們直接設定目標，補足必要基礎知識，就立刻動手吧！最後提醒一些注意的地方，GOGO！
h1、p、img…）如果你是第一次寫前端，請先照這幾步：
index.html，重點是附檔名要是 .html。index.html 當成網站的首頁，你未來把網站放到網路上，只要訪問一個資料夾，伺服器就會自動去找裡面的 index.html 並顯示出來，這是一個「慣例」，如果你只是自己練習，其實檔名取什麼都可以，例如 test.html、hello.html)index.html，你就能看到結果，現在應該是一片空白。下面是最小可用的 HTML：
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<title>我的自我介紹</title>
</head>
<body>
哈囉，我是 Chiayu
我是一名全端工程師
</body>
</html>
重點說明：
<!DOCTYPE html>：宣告 HTML5 文件，避免瀏覽器用相容模式渲染（腦袋有印象就好不用背）。<html lang="zh-Hant">：根元素，lang 對 SEO 與無障礙很重要（腦袋有印象就好不用背）。<head> 是 HTML 文件的 metadata 區域，用來提供關於網頁的資訊，例如標題、描述、編碼方式、外部資源引用等，這些資訊不會直接顯示在網頁上，但會影響瀏覽器呈現與搜尋引擎收錄。<meta charset="UTF-8">：使用 UTF-8，避免中文亂碼。<title>：分頁標題。<body>：實際顯示在畫面上的內容。
我們先來大概設定要做的雛型，在寫任何程式碼前腦袋都要先有畫面！
為了達成上面結構，會用到以下標籤，我們先有概念，等下實作：
nav：導覽列，裡面通常是 ul/li/a，就像書的目錄，幫助你跳到不同章節main：頁面唯一的主要內容，就像一本書的正文，整頁只能有一個section：主內容的主題區塊，就像章節分類h1–h6：標題階層，通常整頁 1 個 h1，h1 最大、h6 最小，就像書名到小節標題p：段落，顯示一般文字，會自動換行並留一點間距img：圖片，alt 就像圖說，讓搜尋引擎和視障者也能理解圖片blockquote：引用文本像是座右銘，通常會縮排，表示這不是你自己寫的話ul/li：列表，會自動出現小圓點，適合條列技能或重點article：獨立內容單元，像是一個作品介紹，可以單獨拿出來看也有意義aside：補充資訊，例如聯絡方式，像雜誌邊欄的小資訊框address：作者或組織的聯絡資訊，像名片一樣放 email、電話footer：頁尾，通常放版權或附註，就像書的版權頁<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<title>我的自我介紹履歷網站</title>
</head>
<body>
<!-- 網站標頭 -->
<header>
<h1>哈囉，我是 Chiayu</h1>
<p>前端工程師｜熱愛學習與分享</p>
<!-- 導覽列 -->
<nav>
<ul>
<li><a href="#about">關於我</a></li>
<li><a href="#skills">技能</a></li>
<li><a href="#projects">作品</a></li>
<li><a href="#contact">聯絡我</a></li>
</ul>
</nav>
</header>
<!-- 主內容 -->
<main>
<!-- 自我介紹 -->
<section id="about">
<h2>關於我</h2>
<img src="me.jpg" alt="我的照片" width="200">
<p>嗨，我是 Chiayu，一名前端工程師，專注於 Angular、TypeScript 與前端架構設計。</p>
<blockquote>「持續學習，讓自己比昨天更強。」</blockquote>
</section>
<!-- 技能 -->
<section id="skills">
<h2>技能 Skillset</h2>
<ul>
<li><strong>Web 語言：</strong> HTML, CSS, TypeScript</li>
<li><strong>前端：</strong> Angular, React, Vue</li>
<li><strong>後端：</strong> Node.js, Express</li>
</ul>
</section>
<!-- 作品集 -->
<section id="projects">
<h2>作品集 Projects</h2>
<article>
<h3>毛毛購物-寵物電商網站</h3>
<p>使用 Angular + Node.js 開發，支援購物車與支付功能。</p>
</article>
<article>
<h3>LINE Bot 預約系統</h3>
<p>結合 GCP 與 LINE API，讓用戶能在時間段內預約服務。</p>
</article>
</section>
</main>
<!-- 側邊欄：聯絡資訊 -->
<aside>
<h2 id="contact">聯絡資訊</h2>
<address>
Email: <a href="mailto:abc123@gmail.com">abc123@gmail.com</a><br>
GitHub: <a href="https://github.com/abc123">github.com/abc123</a><br>
LinkedIn: <a href="https://linkedin.com/in/abc123">linkedin.com/in/abc123</a>
</address>
</aside>
<!-- 頁尾 -->
<footer>
<p>© 2025 Chiayu. All rights reserved.</p>
</footer>
</body>
</html>
<p> 當成「換行」用很多初學者會覺得 <p> 就是「下一行」，於是每一句話都包一個 <p>，導致頁面看起來間距太大。
錯誤範例：
<p>我是一名前端工程師。</p>
<p>我喜歡健身與魔術。</p>
正確做法：
<p>我是一名前端工程師，喜歡健身與魔術。<br>同時也熱衷於學習新技術。</p>
<p>，真的需要中途換行才用 <br>。
<p> 裡放標題或區塊元素有些人會寫成：
錯誤範例：
<p><h2>關於我</h2></p>
問題：<p> 裡面只能放文字或行內元素，標題 (h2) 屬於區塊元素，這樣寫是不合法的 HTML。
雖然「看起來能用」，但其實是瀏覽器幫你修正錯誤，瀏覽器通常會在 <h2> 前自動關閉 <p>。不同瀏覽器或工具可能會以不同方式修正，造成 跨瀏覽器不一致。
正確做法：
<h2>關於我</h2>
<p>我是一名前端工程師...</p>
<span> 來當容器<span> 是行內元素，不會自動換行。有人誤把它當容器用，結果版面擠成一長條。
錯誤範例：
<span>
<h2>技能</h2>
<p>HTML, CSS, JavaScript</p>
</span>
問題：行內元素裡放區塊元素是不正確的，排版會亂掉。一樣你看到的「正常」只是瀏覽器在幫你自動修正。
正確做法：
<section>
<h2>技能</h2>
<p>HTML, CSS, JavaScript</p>
</section>
很多人為了字體大小直接用 <h1>、<h4>、<h6> 來調整，忽略了結構。
錯誤範例：
<h1>Chiayu 的履歷</h1>
<h4>技能</h4>
<h2>作品集</h2>
問題：標題層級跳來跳去，對 SEO 與螢幕閱讀器都不友善。
正確做法：
<h1>Chiayu 的履歷</h1>
<h2>技能</h2>
<h2>作品集</h2>
alt 或隨便填有些人直接省略 alt，或放「IMG_1234.jpg」。
錯誤範例：
<img src="me.jpg">
<img src="logo.png" alt="IMG_1234.jpg">
問題：SEO 失效，螢幕閱讀器唸不出意義。
正確做法：
<img src="me.jpg" alt="Chiayu 的個人照片">
<img src="divider.png" alt=""> <!-- 純裝飾圖留空 -->
<br> 或 來排版不少人為了「多一點空白」狂加 <br> 或 。
錯誤範例：
<p>技能：</p>
<br><br><br><br><br><br>
HTML<br>
CSS<br>
JavaScript
問題：這樣不僅亂，對結構化資料也很糟糕。
正確做法：
<h2>技能</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
明天開始用 CSS / SCSS 美化這個骨架：導覽列橫向排列、照片置中、技能做成卡片、頁尾固定在底部，並建立你的第一套 Design Tokens（色彩、字體、間距）。
很棒的系列文！從基礎到框架實戰很有系統性。如果你也對 AI 應用有興趣，歡迎來看我的「南桃AI重生記」系列：https://ithelp.ithome.com.tw/users/20046160/ironman/8311 一起交流！
iThome鐵人賽
看影片追技術